
import './AdminHomeFit.scss'
import "react-grid-layout/css/styles.css"

import { v4 } from 'uuid'
import { useRef, useState } from 'react'
import { useEventEmitter, useMount, useSize } from 'ahooks'

import GridLayout from 'react-grid-layout'
import { Drawer, FloatButton, Button, Badge, Dropdown, App, Tooltip } from 'antd'
import { PlusCircleOutlined, DeleteOutlined, SaveOutlined } from '@ant-design/icons'
import { GetIndexedDB } from '../../Utils/IndexedDB'
import { AdminHomeTempList } from '../../Config/homeList'
import { DrawerBox } from '../../Model'





const AdminHomeFit = () => {

    const GridBox = useRef()
    const size = useSize(GridBox)
    const { notification } = App.useApp()

    const [Theme, setTheme] = useState()
    const [AdminHome, setAdminHome] = useState([])
    const [AdminData, setAdminData] = useState({})
    const [OptionsCall, setOptionsCall] = useState()


    useMount(async () => {
        const { module, data } = await GetIndexedDB('home')
        const { ThemeSet } = await GetIndexedDB('theme')
        setAdminData(data)
        setAdminHome(module)
        setTheme(ThemeSet.color)
    })

    const onAdded = () => {
        setOptionsCall({ type: 'AdminHomeSelect', width: 600 })
    }

    const onUpload = (i) => {
        console.log('配置模块', i)
    }
    const onDelete = (i) => {
        console.log('删除模块', i)
    }




    const onSubmit = () => {
        console.log('保存模块', AdminHome)
        console.log('保存数据', AdminData)
    }
    const onClear = () => {
        console.log('重置配置')
    }

    const ModalEvent = useEventEmitter()
    ModalEvent.useSubscription(val => {
        const { i } = val
        const type = i.slice(0, i.length - 3)
        const modal = i
        const uuid = v4()
        const module = [...AdminHome, { ...val, i: uuid }]
        const data = { ...AdminData, [uuid]: { type, modal } }
        setAdminData(data)
        setAdminHome(module)
    })

    const items = (i) => ([
        { key: 1, label: <div onClick={() => onUpload(i)}>配置</div> },
        { key: 2, label: <div onClick={() => onDelete(i)}>删除</div>, danger: true },
    ])

    return (
        <div className="AdminHomeFit">
            <div className='GridBox' ref={GridBox}>
                {size &&
                    <GridLayout
                        className="layout"
                        layout={AdminHome}
                        isDroppable={true}
                        isResizable={true}
                        margin={[8, 8]}
                        cols={12}
                        rowHeight={size.height / 12 - 10}
                        width={size.width}
                        onResizeStop={setAdminHome}
                        onDragStop={setAdminHome}
                    >
                        {AdminHome?.map(({ i }) => (
                            <div key={i} style={{ width: '100%', height: '100%' }}>
                                {(() => {
                                    const { type, modal } = AdminData[i]
                                    const Template = AdminHomeTempList[type].child[modal]
                                    // const item = Parameters.find(v => v.i === i)
                                    return (
                                        <Dropdown menu={{ items: items(i) }} trigger={['contextMenu']}>
                                            <div>
                                                <Template />
                                            </div>
                                        </Dropdown>
                                    )
                                })()}
                            </div>
                        ))}
                    </GridLayout>
                }
                <FloatButton.Group shape="square" style={{ bottom: '80vh', right: 24 }}>
                    <Tooltip title="添加模块" placement="left">
                        <FloatButton type="primary" icon={<PlusCircleOutlined />} onClick={onAdded} />
                    </Tooltip>
                    <Tooltip title="保存配置" placement="left">
                        <FloatButton type="primary" icon={<SaveOutlined />} onClick={onSubmit} />
                    </Tooltip>
                    <Tooltip title="重置配置" placement="left">
                        <FloatButton type="primary" icon={<DeleteOutlined />} onClick={onClear} />
                    </Tooltip>
                </FloatButton.Group>
            </div>
            <DrawerBox OptionsCall={OptionsCall} ModalEvent={ModalEvent} />
        </div>
    );
};

export default AdminHomeFit;